<template>
  <div class="login">
    <div class="bg">
      <div class="logo">
        <div class="title">优质甄选·高枕无忧</div>
        <div class="con">
          <el-input v-model="user.username" placeholder="请输入您的用户名"></el-input>
          <el-input v-model="user.password" type="password" placeholder="请输入相应的密码"></el-input>
          <el-button type="danger" round @click="login">登录</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { userLogin } from "../../request/api";
import {mapActions} from 'vuex'
import { successAlert } from '../../utils/alert'
export default {
  data() {
    return {
      user: {
        username: "",
        password: ""
      }
    };
  },
  methods: {
    login() {
      if (this.user.username !== "" && this.user.password !== "") {
        userLogin(this.user).then(res => {
          if (res.code == 200) {
            // console.log(res.list);
            this.requestUser(res.list)//将用户信息存入vuex和session
            successAlert(res.msg)
            this.$router.push("/index");
          }
        });
      }
    },
    ...mapActions({
      "requestUser":"userActions"
    })

  },

  mounted() {
    document.title = this.$route.meta.title;
  }
};
</script>

<style scoped>
.login {
  width: 100vw;
  height: 100vh;
  background-image: linear-gradient(180deg, #ff6040 0%, #ff8a80 100%);
}
.bg {
  width: 700px;
  height: 600px;
  background: url(../../assets/img/bg.png) no-repeat center center;
  background-size: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.logo {
  width: 366px;
  height: 72px;
  background: url(../../assets/img/logo.png) no-repeat center center;
  background-size: 90%;
  position: absolute;
  top: 100px;
  left: 310px;
}
.title {
  width: 366px;
  height: 72px;
  text-align: center;
  line-height: 72px;
  position: absolute;
  top: 100px;
  left: 6px;
  font-size: 20px;
  color: #999999;
  letter-spacing: 10px;
}
.con {
  margin-top: 200px;
}
.el-input {
  width: 100%;
  margin-bottom: 10px;
}
.el-button {
  width: 100%;
}
</style>